import React, { Component } from 'react'
import './shop.css'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Header from '../../components/header/Header'
import { actions, getshoplist, getprice, getall } from '../../store/modules/shop'
import { filterPrice } from '../../filters/index'
class Shop extends Component {
  componentDidMount() {
    let { shop: { reqshoplist } } = this.props
    reqshoplist()
  }
  render() {
    let { list, shop: { reqdel, changeOne, changeadd, changesup, changeall }, getprice, isshow } = this.props
    console.log(list);
    return (
      <div className='Shop'>
        <Header title='购物车'></Header>
        <div className="header-nav">
          <ul>
            <li>全部(20)</li>
            <li>降价(4)</li>
            <li>常卖(2)</li>
            <li>分类</li>
          </ul>
        </div>
        <div className='content'>
          <div className="content-top">
            <div className="content-topl">
              <input type="checkbox" checked={isshow} onChange={() => changeall()} />
              <span>小U自营</span>
            </div>
            <div className="content-topr">
              <span>已免运费</span>
              <span></span>
              <span>领券</span>
            </div>
          </div>
        </div>
        <div className='main'>
          {/* {
            list.length > 0 ?
              list.map(item => (
                <div className="neirong" key={item.id}>
                  <input type="checkbox" checked={item.checked} onChange={() => changeOne(item.id)} />
                  <div className="pic">
                    <img src={item.img} alt="" />
                  </div>
                  <div className="zi">
                    <h2>{item.goodsname}</h2>
                    <p className="p1">{item.goodsname}</p>
                    <p className="bi">比加入时降低&yen;100</p>
                    <div className='jia'>
                      <p className="p2"><span>&yen;{item.price}</span> <del>&yen;1099</del></p>
                      <div className="jiaj">
                        <span onClick={() => changesup(item.id)}>-</span>
                        <span>{item.num}</span>
                        <span onClick={() => changeadd(item.id)}>+</span>
                      </div>
                    </div>
                  </div>
                  <button onClick={() => reqdel(item.id)}>删除</button>
                </div>
              )) : null
          } */}
          {
            list.length>0?
              (list.map(item => (
                <div className="neirong" key={item.id}>
                  <input type="checkbox" checked={item.checked} onChange={() => changeOne(item.id)} />
                  <div className="pic">
                    <img src={item.img} alt="" />
                  </div>
                  <div className="zi">
                    <h2>{item.goodsname}</h2>
                    <p className="p1">{item.goodsname}</p>
                    <p className="bi">比加入时降低&yen;100</p>
                    <div className='jia'>
                      <p className="p2">&yen;<span>{item.price}</span> <del>&yen;1099</del></p>
                      <div className="jiaj">
                        <span onClick={() => changesup(item.id)}>-</span>
                        <span>{item.num}</span>
                        <span onClick={() => changeadd(item.id)}>+</span>
                      </div>
                    </div>
                  </div>
                  <button onClick={() => reqdel(item.id)}>删除</button>
                </div>
              ))):null
          }
        </div>

        <div className='fff'>
          <div className="footer">
            <form action="#" className="fl">
              <input type="checkbox" checked={isshow} onChange={() => changeall()} />
              <h2>全选</h2>
            </form>
            <div className="fl">
              <div className="top">
                <p>
                  合计
                  <span>&yen;{filterPrice(getprice)}</span>
                </p>
              </div>
              <div className="x">
                <p>
                  已免运费
                  <span>以优惠&yen;200元</span>
                </p>
              </div>
            </div>
            <div className="fr">
              <div className="q">
                <i>去结算</i>
              </div>
            </div>
          </div>
        </div>

      </div>
    )
  }
}

let mapStateToProps = state => ({
  list: getshoplist(state),
  getprice: getprice(state),
  isshow: getall(state)
})
let mapDispatchToProps = dispatch => ({
  shop: bindActionCreators(actions, dispatch)
})
export default connect(mapStateToProps, mapDispatchToProps)(Shop)